<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <button>点击</button>
    <div class="box"></div>
    <script>
        // button 点击类型  0 鼠标左键 1 鼠标滚轮 2.鼠标右键触发
        var btn = document.querySelector("button");
        // btn.onclick = function (e) {
        //     var e = e || window.event;
        //     console.log(e.button);
        // }
        // 1.鼠标右键触发
        // btn.oncontextmenu = function (e) {
        //     console.log(e.button);
        //     // 阻止默认事件
        //     // e.preventDefault();
        // }

            // 一、鼠标事件
            /* 
                1.mouseover  ：鼠标覆盖
                2.mouseenter： 鼠标进入
                3.mouseout ：鼠标移除
                4.mouseleave ：鼠标离开
                5.mousemove ：鼠标移动
                6.mouseup： 鼠标抬起
                7.mousedown：鼠标按下
            */
            var box = document.querySelector(".box");
            // box.onmouseover = function () {
            //     console.log("鼠标覆盖触发");
            // }

            // box.onmouseenter = function () {
            //     console.log("鼠标进入触发");
            // }

            // box.onmouseout = function () {
            //     console.log("鼠标离开触发");
            // }

            // box.onmouseleave = function () {
            //     console.log("鼠标离开触发");
            // }
            // box.onmousemove = function () {
            //     console.log("鼠标再事件源上移动触发，一直触发");
            // }
            // box.onmouseup = function () {
            //     console.log("鼠标抬起的时候触发");
            // }
            // box.onmousedown = function () {
            //     console.log("鼠标按下的时候触发");
            // }


            // 二、键盘事件
            // 三、浏览器事件
            // 四、表单事件
            // 五、触摸事件
            // 六、其他事件




    </script>
</body>
</html>